import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Checkbox, Tooltip, Avatar, List } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";

import AddScheme from "../components/dashboard/add.scheme";
import EditScheme from "../components/dashboard/edit.scheme";
import AddSchemeDetail from "../components/dashboard/add.scheme.detail";
import EditSchemeDetail from "../components/dashboard/edit.scheme.detail";

const DashboardPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const state = useReactive({
        schemes: [],
        loading: false,
        selectedScheme: {},
    });

    const loadData = () => {
        state.schemes = [
            { oiName: "werrewrwe", oiUuid: 65456132, oiDesc: "sdfasdfasdgsadfdsaf" },
            { oiName: "wesadfsdaf", oiUuid: 211231, oiDesc: "sdfsadfsdafadfdsaf" },
        ];
        console.log(state.schemes);
        state.selectedScheme = state.schemes[0];
    };

    useEffect(() => {
        loadData();
    }, []);

    const openAddScheme = () => {
        setModalTitle("新增方案");
        setModalWidth(750);
        setModalComponent(<AddScheme />);
        setModalVisible(true);
    };
    const openEditScheme = (record) => {
        setModalTitle("编辑方案");
        setModalWidth(750);
        setModalComponent(<EditScheme record={record} />);
        setModalVisible(true);
    };
    const openAddSchemeDetail = () => {
        setModalTitle("新增方案明细");
        setModalWidth(500);
        setModalComponent(<AddSchemeDetail selectedScheme={state.selectedScheme} />);
        setModalVisible(true);
    };
    const openEditSchemeDetail = (record) => {
        setModalTitle("编辑方案明细");
        setModalWidth(500);
        setModalComponent(<EditSchemeDetail selectedScheme={state.selectedScheme} record={record} />);
        setModalVisible(true);
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={8}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>消费者列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    size="default"
                    bodyStyle={{ padding: 10, height: cardBodyHeight, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />} onClick={openAddScheme}></Button>
                            <Button icon={<IconRefresh />} onClick={loadData}></Button>
                        </ButtonGroup>
                    }
                >
                    <List
                        loading={state.loading}
                        itemLayout="horizontal"
                        dataSource={state.schemes}
                        renderItem={(item, index) => (
                            <List.Item
                                key={index}
                                className={`list-item ${state.selectedScheme?.oiUuid === item?.oiUuid ? "list-item-selected" : ""}`}
                                onClick={() => {
                                    state.selectedScheme = item;
                                }}
                                extra={
                                    <ButtonGroup theme="borderless">
                                        <Button icon={<IconEdit />} onClick={() => openEditScheme(item)}></Button>
                                        <Button icon={<IconDelete />}></Button>
                                    </ButtonGroup>
                                }
                            >
                                <List.Item.Meta title={item?.oiName} description={item?.oiName} />
                            </List.Item>
                        )}
                    />
                </SemiCard>
            </Col>

            <Col span={16}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>详情</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 10, height: cardBodyHeight, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />} onClick={openAddSchemeDetail}></Button>
                            <Button icon={<IconRefresh />} onClick={loadData}></Button>
                        </ButtonGroup>
                    }
                >
                    <Table loading={state.loading} size="small" bordered dataSource={[{ scUuid: 21231, scMone: 50, scFree: 200, scZhec: "90%" }]} rowKey="oaarRole" pagination={false}>
                        <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    </Table>
                    <div>消费者基本信息</div>
                    <div>消费者充值记录</div>
                    <div>消费者消费记录</div>
                    <div>消费者消费账户余额</div>
                </SemiCard>
            </Col>
        </Row>
    );
};

export default DashboardPage;
